<template>
  <div class="singer">
    <ul class="singer-header">
      <li v-for="(item,index) in identifyState" :key="index" @click="handleChangeView(item)"
          :class="{active:item.name==activeName}">
        {{item.name}}
      </li>
    </ul>
    <div style="display: inline" v-if="recordState">
      <el-button style="margin-left: 30px;margin-right: 120px" type="primary" @click="centerDialogVisible = true">
        麦穗图片处理
      </el-button>
      <div style="display: inline-block">
        状态：
        <el-tag>识别中</el-tag> <!--1-->
        <el-tag type="warning">已识别</el-tag> <!--2-->
        <el-tag type="success">纠错完成</el-tag> <!--3-->
      </div>
<!--      <el-select style="margin-left: 50px;width: 150px" v-model="selectValue" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>-->
    </div>
    <div>
      <content-list :contentList="data"></content-list>
      <div class="pagination">
        <el-pagination @current-change="handleCurrentChange" background layout="total,prev,pager,next"
                       :current-page="currentPage" :page-size="pageSize" :total="albumDatas.length">
        </el-pagination>
      </div>
    </div>

    <el-dialog title="麦穗图片处理" :visible.sync="centerDialogVisible" width="500px" center @close="closeDialog">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="上传识别" size="mini">
          <el-upload
            :multiple="false"
            drag
            :auto-upload="false"
            ref="uploadscan"
            :file-list="fileList"
            list-type="picture"
            action="http://baidu.com"
            :limit="1"
            :on-exceed="handleExceed"
            :before-upload="beforeAvatorUpload"
            :on-remove="handleRemove"
            :http-request="requestFile">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，<em>上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过20Mb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="有无标志物" size="mini" required style="width: 300px">
          <template>
            <el-radio v-model="form.isMark" label="0">有标志物</el-radio>
            <el-radio v-model="form.isMark" label="1">无标志物</el-radio>
          </template>
        </el-form-item>
        <el-form-item v-if="form.isMark=='0'" label="标志物面积" size="mini" required style="width:
        300px">
          <el-input v-model="form.area" size="mini" style="width: 150px"></el-input>&nbsp;&nbsp; cm
        </el-form-item>
      </el-form>

      <span slot="footer">
                <el-button size="mini" @click="centerDialogVisible = false">ESC返回</el-button>
                <el-button size="mini" @click="dealPic">确定</el-button>
            </span>
    </el-dialog>
  </div>
</template>
<script>
  import ContentList from '../components/ContentList';
  import {selectIdentifyByUser, getIdentifyOfState} from '../api/index';
  import {mixin} from '../mixins/index';
  import {identifyState} from '../assets/data/identifyState';
  import {mapGetters} from 'vuex';
  import axios from 'axios';

  export default {
    name: 'identify',
    components: {
      ContentList
    },
    mixins: [mixin],
    data() {
      return {
        form: {
          isMark: '0',
          // area: 0.00,
        },
        options: [
          {
            value: '选项1',
            label: '全部'
          }, {
            value: '选项2',
            label: '识别中',
          }, {
            value: '选项3',
            label: '识别完成'
          }, {
            value: '选项4',
            label: '识别完成'
          }],
        selectValue: '',
        refresh: true,
        fileList:
          [],
        centerDialogVisible: false,
        albumDatas: [],      //识别的数据
        pageSize: 15,        //页面大小，一页有15条数据
        currentPage: 1,      //当前页，默认第一页
        identifyState: [],           //识别状态
        activeName: '全部',    //全部的记录
        recordState: true,
        buttonflag: true
      }

    },
    computed: {
      //计算当前表格中的数据
      data() {
        return this.albumDatas.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
      },
      ...mapGetters([
        'listOfSongs',      //当前播放列表
        'userId',           //当前登录用户id
      ])
    },
    mounted() {
      this.identifyState = identifyState;
      this.getIdentifyList();
    },
    methods: {
      requestFile(param) {

        // let uploadUrl = "/item/filedata/upload";
        let uploadUrl = `/identify/update_pic/${this.userId}`;
        let form = new FormData();    // FormData 对象
        form.append('file', param.file);    // 文件对象
        form.append('isMark', this.form.isMark);  //表单其他参数。。
        if (this.form.area) {
          form.append('area', this.form.area);  //表单其他参数。。
        } else {
          form.append('area', '0.00');
        }
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        };
        axios.post(uploadUrl, form, config).then(function (result) {
          console.log(result);
          this.centerDialogVisible = false;
        }).catch(function (result) {
          this.centerDialogVisible = false;
        });
        this.buttonflag = false;
      },
      dealPic() {
        this.$refs.uploadscan.submit();
        // this.centerDialogVisible = false;
      },
      closeDialog() {
        this.fileList = [];
        if (this.refresh == false) {
          location.reload();
        }
        this.refresh = true;
      },
      handleRemove() {
      },
      uploadUrl() {
        return `${this.$store.state.configure.HOST}/identify/update_pic/${this.userId}`
      },
      //上传之前的校验
      beforeAvatorUpload(file) {
        const isJPG = file.type == 'image/jpeg';
        const isLt20M = file.size / 1024 / 1024 < 20;
        if (!isJPG) {
          this.notify('上传头像图片只能是JPG格式', 'error');
          return false;
        }
        if (!isLt20M) {
          this.notify('上传麦穗图片不能大于20MB', 'error');
          return false;
        }
        this.refresh = false;
        return true;
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      getIdentifyList() {
        selectIdentifyByUser(this.userId)
        // todo  这里是分页获取所有的记录数据
          .then(res => {
            this.currentPage = 1;
            this.albumDatas = res.data;
          })
      },
      //获取当前页
      handleCurrentChange(val) {
        this.currentPage = val;
      },
      //根据类型显示对应的歌手
      //todo 根据状态查询相应的记录
      handleChangeView(item) {
        this.activeName = item.name;
        this.albumDatas = [];
        if (item.name == '全部') {
          this.getIdentifyList();
          this.recordState = true;
        } else {
          // 这里的type 是 配置文件中写的
          this.getIdentifyOfState(item.type)
          this.recordState = false;
        }
      },
      //todo 根据状态查询对应的歌手
      getIdentifyOfState(state) {
        getIdentifyOfState(this.userId, state)
          .then(res => {
            this.currentPage = 1;
            this.albumDatas = res.data;
          })
      },

    }
  }
</script>

<style lang="scss" scoped>
  @import '../assets/css/singer.scss';
</style>
